<template>
  <div class="cart">
    <navBar :title="title"></navBar>
    <div class="address">{{address?'送至：'+address.address:''}}</div>
    <div class="cartList">
      <van-checkbox-group class="cartList_group" v-model="result">
        <van-cell-group>
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
                :finished="finished"
                finished-text="没有更多了"
                @load="getList"
            >
            <van-cell class="cartList_item" v-for="(item, index) in data.list" :key="index">
              <div class="cartList_item_header">
                <van-checkbox
                  checked-color="#094257"
                  :name="index"
                  ref="checkboxes"
                  slot="right-icon"
                />
                <div class="product_img">
                  <img width="100%" :src="item.goods.original_img" alt />
                </div>
                <div class="myCollectionList_item_info">
                  <div class="myCollectionList_item_name">{{item.goods_name}}</div>
                  <div class="specifications">规格: {{item.specifications||'500'}}g</div>
                  <div class="unit_price">
                    <span class="price">{{item.goods_price}}</span>
                    <span class="unit">/份</span>
                  </div>
                  <div class="stepper">
                    <img class="stepper_img" src="/img/38.png" @click="reduct(item)" />
                    <span class="input_num">{{item.goods_num}}</span>
                    <img class="stepper_img" src="/img/56.png" @click="add(item)" />
                  </div>
                </div>
              </div>
              <div class="cartList_item_bottom">
                <span class="tips">小计：</span>
                <span class="price">{{item.unitPrice}}</span>
              </div>
            </van-cell>
            </van-list>
          </van-pull-refresh>
          <van-cell class="cartList_item nextJia" v-for="(item, index) in myCartList" :key="index">
            <div class="cartList_item_header">
              <div class="nextJia_btn">下架</div>
              <div class="product_img">
                <img width="100%" :src="item.img" alt />
                <div class="next_img">下架</div>
              </div>
              <div class="myCollectionList_item_info">
                <div class="myCollectionList_item_name">{{item.name}}</div>
                <div class="specifications">规格: {{item.specifications}}g</div>
                <div class="unit_price">
                  <span class="price">{{item.unitPrice}}</span>
                  <span class="unit">/份</span>
                </div>
              </div>
              <div class="nextJia_btn like">找相似</div>
            </div>
            <div class="mentceng"></div>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <!-- <van-submit-bar class="my_submit_bar" :price="3050" button-text="去结算（2）" @submit="onSubmit"></van-submit-bar> -->
    <div class="submit_bar">
      <van-checkbox checked-color="#094257" v-model="checked" @click="changeAllChecked()">全选</van-checkbox>
      <div class="heji">
        <div class="heji_je">
          合计:
          <span style="color:#E13A3B">¥{{cartPriceInfo.total_fee}}</span>
        </div>
        <div class="total_je">总价格：¥{{cartTotalPrice}} 优惠：¥{{cartPriceInfo.goods_fee}}</div>
      </div>
      <div class="go_js" :disabled="this.result.length== 0?true:false" @click="gobuy(data.list)">去结算（{{cartPriceInfo.goods_num}}）</div>
    </div>
    <noOrder :noOrder="noOrder" :productList="productList"></noOrder>
  </div>
</template>

<script>
import noOrder from "components/noOrder";
import navBar from "components/navBar";
import { Checkbox, CheckboxGroup, Cell, CellGroup, SubmitBar } from "vant";
import { List, PullRefresh } from "vant";
Vue.use(List).use(PullRefresh);
Vue.use(Checkbox)
  .use(CheckboxGroup)
  .use(Cell)
  .use(CellGroup)
  .use(SubmitBar);
export default {
  data() {
    return {
      title: "购物车",
      current: "",
      noOrder: false,
      record: true,
      loading: false,
      productList: [],
      list: ["a", "b", "c"],
      result: [],
      myCartList: [ 
      ],
      checked: false,
      data: {
        list: [],
        page: {
          nowPage: 0
        }
      },
      cartPriceInfo: {
        goods_fee: 0,
        goods_num: 0,
        total_fee: 0,
      }
    };
  },
  components: {
    noOrder,
    navBar
  },
  mounted(){
    console.log('默认地址', this.$store.state.selected_address)
    this.getList()
  },
  methods: {
    changeAllChecked: function() {
      if (!this.checked) {
        const arr6 = Array.from(
          { length: this.data.list.length },
          (v, k) => k
        );
        this.result = arr6;
      } else {
        this.result = [];
      }
    },
    gobuy(data){
      console.log('data',data);
      if(data.length>0) {
        this.$router.push({ name: "order_detail"});
      }
    },
    reduct(item) {
      // if(item.goods_num==1) {
      // }
      item.goods_num > 0 ? item.goods_num-- : 0
      this.modifyCart(item)
    },
    add(item) {
      item.goods_num++
      this.modifyCart(item)
    },
    onRefresh(){
      this.data = {
        list: [],
        page: {
          nowPage: 0
        }
      }
      this.getList()
    },
    getList(){
      this.loading = true
      this.$store.dispatch('cartList', {
        p: this.data.page.nowPage + 1
      }).then(res=>{
        this.data.list = this.data.list.concat(res.data.result.list)
        this.cartPriceInfo = res.data.result.cart_price_info
        this.loading = false
      }).catch(e=>{
        this.loading = false
      })
    },
    modifyCart(item){
      this.$store.dispatch('updateCartNum', {
        id: item.id,
        num: item.goods_num,
      }).then(res=>{
        this.cartPriceInfo = res.data.result.cart_price_info
        if(item.goods_num==0){
          this.onRefresh()
        }
      }).catch(e=>{

      })
    },
    AsyncUpdateCart() {
      // return console.log('this.selectedItems', this.selectedItems)
      this.$store.dispatch('AsyncUpdateCart', {
        cart: this.selectedItems
      }).then(res=>{
        // this.data.list = res.data.result.cart_list
        this.cartPriceInfo = res.data.result.cart_price_info
      }).catch(e=>{

      })
    },
    generateResult(){
      var a = [],  d = this.data.list
      for (let index = 0; index < d.length; index++) {
        const element = d[index];
        if(element.selected){
          a.push(index)
        }
      }
      this.result = a
    }
  },
  watch: {
    result: function() {
      if (this.result.length!= 0 && this.result.length == this.data.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.AsyncUpdateCart()
    },
    'data.list'(){
      this.generateResult()
    }
  },
  computed: {
    address(){
      return this.$store.state.selected_address || undefined
    },
    address_id(){
      return this.address ? this.address.address_id : 0
    },
    cartTotalPrice(){
      var p = 0, d = this.data.list
      for (let index = 0; index < d.length; index++) {
        const element = d[index];
        if(element.selected==1) {
          p += element.goods_num * element.goods_price
        }        
      }
      return p.toFixed(2)
    },
    copPrice(){
      return (this.cartTotalPrice - this.cartPriceInfo.total_fee).toFixed(2)
    },
    selectedItems(){
      var a = [],  d = this.data.list, r = this.result
      for (let index = 0; index < d.length; index++) {
        const element = d[index]
        if(r.indexOf(index)>-1) {
          element.selected = 1
          a.push({
            id: element.id,
            selected: 1
          })
        }else{
          element.selected = 0
          a.push({
            id: element.id,
            selected: 0
          })
        }
      }
      return a
    },
    finished(){
      return true
        if(this.data.page.totalPages && this.data.page.totalPages <= this.data.page.nowPage) {
            return true
        }
        return false
    },
  }
};
</script>
<style lang="less" rel="stylesheet/less" >
.cart {
  padding-bottom: 96px;
  background-color: #f7f7f7;
  .cartList {
    min-height: 100vh;
    .van-pull-refresh,.van-pull-refresh__track{
      min-height: 200px;
    }
    .cartList_group {
       min-height: 200px;
      .van-cell-group {
        background-color: #f7f7f7;
      }
      .cartList_item {
        width: 350px;
        height: 147px;
        margin: 0 auto;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 10px;
        &.van-cell {
          padding: 0;
          padding-left: 11px;
        }
        .cartList_item_header {
          display: flex;
          align-items: center;
          height: 110px;
          border-bottom: 1px solid #ededed;
          .product_img {
            position: relative;
            width: 63px;
            height: 63px;
            margin-left: 8px;
            margin-right: 13px;
          }
          .myCollectionList_item_info {
            .myCollectionList_item_name {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              color: rgba(48, 48, 48, 1);
            }
            .specifications {
              font-size: 11px;
              font-family: PingFangSC-Regular;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
            }
            .unit_price {
              margin-top: 16px;
              font-size: 11px;
              font-family: PingFangSC-Medium;
              font-weight: 700;
              color: rgba(225, 52, 52, 1);
              .unit {
                font-size: 9px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(140, 140, 140, 1);
              }
            }
            .stepper {
              position: absolute;
              top: 83px;
              right: 19px;
              display: flex;
              align-items: center;
              .stepper_img {
                width: 28px;
                height: 22px;
              }
              .input_num {
                display: inline-block;
                width: 28px;
                height: 22px;
                text-align: center;
                line-height: 22px;
                background: rgba(247, 247, 247, 1);
                font-size: 11px;
                color: rgba(48, 48, 48, 1);
              }
            }
          }
        }
        .cartList_item_bottom {
          line-height: 34px;
          float: right;
          .tips {
            font-size: 11px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(48, 48, 48, 1);
          }
          .price {
            font-size: 11px;
            font-family: PingFangSC-Medium;
            font-weight: 700;
            color: rgba(225, 52, 52, 1);
            margin-right: 18px;
          }
        }
        &.nextJia {
          position: relative;
          height: 110px;
          .nextJia_btn {
            width: 34px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid rgba(151, 151, 151, 1);
            font-size: 9px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(182, 182, 182, 1);
            &.like {
              width: 45px;
              margin-left: 50px;
            }
          }
          .mentceng {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.4);
          }
          .next_img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 34px;
            height: 20px;
            line-height: 20px;
            background: rgba(0, 0, 0, 1);
            border-radius: 10px;
            opacity: 0.4;
            font-size: 9px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            text-align: center;
          }
        }
      }
    }
  }
  .address {
    font-size: 11px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 34px;
    text-align: center;
  }
  .van-submit-bar {
    bottom: 58px;
  }
  .submit_bar {
    display: flex;
    align-items: center;
    position: fixed;
    padding-left: 25px;
    bottom: 55px;
    width: 375px;
    height: 53px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.18);
    z-index: 999;
    .heji {
      flex: 1;
      margin-left: 18px;
      .heji_je {
        font-size: 15px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }
      .total_je {
        font-size: 9px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 48, 48, 1);
      }
    }
    .go_js {
      width: 118px;
      height: 53px;
      line-height: 53px;
      text-align: center;
      background: linear-gradient(
        90deg,
        rgba(1, 47, 64, 1) 0%,
        rgba(1, 47, 64, 1) 100%
      );
      font-size: 15px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      float: right;
    }
  }
  .van-checkbox__label {
    width: 24px;
    height: 16px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(48, 48, 48, 1);
    line-height: 16px;
  }
}
</style>
